<template>
  <a-button
    size="small"
    :loading="loading"
    @click="onClick"
    v-bind="$attrs"
    :class="{
      'is-plain': plain
    }"
    :disabled="state.countdown > 0 ? true : $attrs.disabled"
  >
    <slot></slot>
    <template #icon>
      <slot name="icon">
        <i :class="`cps-icon-${icon}`" class="mr-5px" v-if="icon"></i>
      </slot>
    </template>

    <template v-if="state.countdown > 0">
      <span>（{{ state.countdown }}）</span>
    </template>
  </a-button>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
const emits = defineEmits(['click'])
const loading = ref(false)

const props = defineProps({
  throttle: {
    type: Number,
    default: 500
  },
  countdown: {
    type: Number,
    default: 0
  },
  plain: {
    type: Boolean,
    default: false
  },
  icon: {
    type: String,
    default: ''
  }
})
const state = reactive({
  countdown: props.countdown
})
const btnCountDown = () => {
  const timer = setInterval(() => {
    if (state.countdown > 0) {
      state.countdown--
    } else {
      clearInterval(timer)
    }
  }, 1000)
}
let timer = null
const onClick = async e => {
  if (!props.throttle) {
    emits('click', e)
    return false
  }
  if (timer) {
    clearTimeout(timer)
  }
  if (loading.value) {
    return false
  }
  loading.value = true
  emits('click', e)
  timer = setTimeout(() => {
    loading.value = false
  }, props.throttle)
}
onMounted(() => {
  props.countdown > 0 && btnCountDown()
})
</script>
<style lang="scss" scoped>
.ant-btn-primary,
.ant-btn-primary.is-plain:hover {
  background: #1890ff !important;
  border-color: #1890ff !important;
  color: #fff !important;
}
.ant-btn-primary.is-plain {
  color: #1890ff !important;
  background: #e8f4ff !important;
  border-color: #a3d3ff !important;
}
.btn-success,
.btn-success.is-plain {
  background-color: #67c23a !important;
  border-color: #67c23a !important;
  color: #fff !important;
}

.btn-success.is-plain {
  color: #389e0d !important;
  background: #f6ffed !important;
  border-color: #b7eb8f !important;
}

.ant-btn-link.btn-success {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #67c23a !important;
}
.ant-btn-background-ghost.ant-btn-primary {
  color: #1890ff !important;
  background: transparent !important;
  border-color: #1890ff !important;
  text-shadow: none !important;
}
.ant-btn-background-ghost.btn-success {
  color: #67c23a !important;
  background: transparent !important;
  border-color: #67c23a !important;
  text-shadow: none !important;
}
.ant-btn-background-ghost.ant-btn-primary {
  color: #1890ff !important;
  background: transparent !important;
  border-color: #1890ff !important;
  text-shadow: none !important;
}

.btn-warning,
.btn-warning.is-plain:hover {
  background-color: #faad14 !important;
  border-color: #faad14 !important;
  color: #fff !important;
}

.btn-warning.is-plain {
  color: #ffba00 !important;
  background: #fff8e6 !important;
  border-color: #ffe399 !important;
}

.ant-btn-link.btn-warning {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #e6a23c !important;
}

.ant-btn-background-ghost.btn-warning {
  color: #e6a23c !important;
  background: transparent !important;
  border-color: #e6a23c !important;
  text-shadow: none !important;
}

.btn-danger,
.btn-danger.is-plain:hover {
  background-color: rgb(245, 108, 108) !important;
  border-color: #f56c6c !important;
  color: #fff !important;
}
.btn-danger.is-plain {
  color: #ff9292 !important ;
  background-color: #ffeded !important;
  border-color: #ffdbdb !important;
}

.ant-btn-link.btn-danger {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #f56c6c !important;
}
.ant-btn-background-ghost.btn-danger {
  color: #f56c6c !important;
  background: transparent !important;
  border-color: #f56c6c !important;
  text-shadow: none !important;
}

.btn-info,
.btn-info.is-plain:hover {
  background-color: #909399 !important;
  border-color: #909399 !important;
  color: #fff !important;
}
.btn-info.is-plain {
  color: #909399 !important;
  background: #f4f4f5 !important;
  border-color: #d3d4d6 !important;
}

.ant-btn-link.btn-info {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #909399 !important;
}
.ant-btn-background-ghost.btn-info {
  color: #909399 !important;
  background: transparent !important;
  border-color: #909399 !important;
  text-shadow: none !important;
}
.ant-btn-primary,
.btn-danger,
.btn-warning,
.btn-success {
  &.ant-btn-background-ghost[disabled],
  &.ant-btn-background-ghost[disabled]:hover,
  &.ant-btn-background-ghost[disabled]:focus,
  &.ant-btn-background-ghost[disabled]:active {
    opacity: 0.6;
  }

  &.ant-btn-primary[disabled],
  &.ant-btn-primary[disabled]:hover,
  &.ant-btn-primary[disabled]:focus,
  &.ant-btn-primary[disabled]:active {
    opacity: 0.6;
  }
  &.ant-btn-link[disabled],
  &.ant-btn-link[disabled]:hover,
  &.ant-btn-link[disabled]:focus,
  &.ant-btn-link[disabled]:active {
    opacity: 0.6;
  }
}
</style>

<style>
.ant-btn > .anticon + span,
.ant-btn > span + .anticon {
  margin-left: 5px;
}
</style>
